<template>
  <div class="card-item">
    <el-row :gutter="20" v-for="(food, index) in modelValue" :key="index">
      <el-col :span="6">
        <el-input
          placeholder="辣、不辣、小份"
          v-model="food.attribute"
          @blur="change"
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-input
          placeholder="单位"
          v-model="food.unit"
          @blur="change"
        ></el-input>
      </el-col>
      <el-col :span="10">
        <el-input-number
         @blur="change"
          v-model="food.unitprice"
          placeholder="单价"
          :precision="2"
          :step="0.5"
          :max="9999"
        />
      </el-col>
      <el-col :span="2">
        <el-button type="primary" v-if="index === 0" @click="addOne"
          >添加</el-button
        >
        <el-button type="danger" v-else @click="delOne(food)">删除</el-button>
      </el-col>
    </el-row>
  </div>
</template>


<script setup>
import { ref } from "vue";
const emit = defineEmits(["update:modelValue"]);

const props = defineProps({
  item: Object,
  index: Number,
  modelValue: Array,
});


const addOne = () => {
  props.modelValue.push({
    attribute: "",
    unit: "",
    unitprice: 0.0,
  });
};

const change = () => {
  emit("update:modelValue", props.modelValue);
};

const delOne = (item) => {
  var index = props.modelValue.indexOf(item);
  if (index !== -1) {
    props.modelValue.splice(index, 1);
  }
};

const scrollTo = (item) => {
  emit("scrollTo", item);
};
</script>


<style scoped>
.card-item {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  /* border: 1px solid #ccc; */
  background-color: #fff;
  margin-top: 10px;
  cursor: pointer;

  position: relative;
}

.el-row {
  margin-bottom: 20px;
}

:deep(.el-select) {
  width: 100%;
}

.card-no {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 24px;
  color: #e1e1e1;
  font-weight: bold;
}
</style>